<template>
  <div class="edit-container">
    <my-nav-bar
      :title="typeName"
      :rightText="rightText"
      @click-right="onClickRight"
    />
    <!-- 内容部分 -->
    <div class="avatar" v-if="type === 'avatar'">
      <van-uploader
        @delete="delImage"
        v-model="fileList"
        :max-count="1"
        preview-size="200px"
        :before-read="beforeRead"
        :after-read="afterRead"
      />
    </div>
    <div v-else>
      <van-field v-model="content" :placeholder="placeholder" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { computed, ref, watch, getCurrentInstance } from 'vue'
import MyNavBar from '@/components/MyNavBar.vue'
import user from '../../store/modules/user'
import { editUser, upload } from '../../api/user'

// 实例
const instance: any = getCurrentInstance()

// 路由相关
const route = useRoute()
const router = useRouter()

// vuex相关
const store = useStore()
const userInfo: any = store.getters.getUserInfo

// 获取参数
const type: any = route.query.type

// 模型相关
const content = ref(userInfo[type])
const rightText = ref('')
const fileList = ref([
  {
    url: `${import.meta.env.VITE_APP_BASEURL}${userInfo.avatar}`
  }
])

// 计算属性相关
const typeName = computed(() => {
  let name = ''
  switch (type) {
    case 'avatar':
      name = '修改头像'
      break

    case 'nickname':
      name = '修改昵称'
      break

    case 'intro':
      name = '修改个人简介'
      break

    case 'position':
      name = '修改职位'
      break

    default:
      break
  }

  return name
})

const placeholder = computed(() => {
  let name = ''
  switch (type) {
    case 'nickname':
      name = '请输入昵称'
      break

    case 'intro':
      name = '请输入个人简介'
      break

    case 'position':
      name = '请输入职位'
      break

    default:
      break
  }

  return name
})

// watch 相关
watch(content, () => {
  if (content.value.trim().length === 0) {
    rightText.value = ''
  } else if (content.value === userInfo[type]) {
    rightText.value = ''
  } else {
    rightText.value = '保存'
  }
})

// 头像上传相关方法
const delImage = () => {
  fileList.value = []

  rightText.value = ''
}

const beforeRead = (file: any) => {
  if (
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/png' &&
    file.type !== 'image/gif'
  ) {
    instance.ctx.$toast('请上传 jpg、jpeg、png、gif 格式的图片')
    return false
  }

  return true
}

const afterRead = async (file: any) => {
  file.status = 'uploading'
  file.message = '上传中...'

  // 上传操作
  const res: any = await upload(file.file)
  if (res.code === 200) {
    instance.uploadUrl = res.data[0].url
    instance.uploadId = res.data[0].id
  }

  file.status = 'down'
  file.message = '上传完成'

  rightText.value = '保存'
}

// 修改
const onClickRight = async () => {
  if (type != 'avatar' && content.value.trim().length === 0) {
    instance.ctx.$toast('内容不能为空!')

    return
  }

  if (type === 'avatar' && !instance.uploadUrl) {
    instance.ctx.$toast('请上传头像!')

    return
  }

  const res: any = await editUser({
    [type]: type === 'avatar' ? instance.uploadId : content.value
  })

  if (res.code === 200) {
    instance.ctx.$toast('修改信息成功~')

    // 更新vuex中的内容
    store.commit('user/setUserInfo', {
      ...userInfo,
      [type]: type === 'avatar' ? instance.uploadUrl : content.value
    })

    // 返回
    router.back()
  }
}
</script>

<style lang="less" scoped>
.edit-container {
  height: 100%;
  background-color: #fff;
  .avatar {
    width: 375px;
    height: 300px;
    padding-top: 50px;
    text-align: center;
  }
  ::v-deep .van-field__body {
    background: #f7f4f5;
    border-radius: 8px;
    width: 345px;
    height: 40px;
    padding-left: 15px;
    box-sizing: border-box;
  }
}
</style>
